<template>
    <div>
        <div id="pie"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'Pie',
    props: ['dataList'],
    data() {
        return {
            achieve: 0,
            notAchieve: 0,
        };
    },

    mounted() {
    },
    watch: {
        dataList: {
            handler(dataList) {
                this.getData(dataList)
                this.initPie()
            },
            deep: true
        }
    },

    methods: {
        initPie() {
            let chartDom = document.getElementById('pie');
            let myChart = echarts.init(chartDom);
            let option;

            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '计时分钟量',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                color: '#686868'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: this.achieve, name: '已完成' },
                            { value: this.notAchieve, name: '已放弃' }
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },
        // 得到已完成、已放弃分钟量
        getData(dataList) {
            dataList.map(item => {
                let arr = item.settingTime.split(' : ')
                let count = arr[0] * 60 + arr[1] * 1 + arr[2] / 60
                // 保留两位小数
                count = Math.ceil(count * 100) / 100
                item.isAchieve == 'true' ? this.achieve += count : this.notAchieve += count
            })
        }

    },
};
</script>

<style lang="less" scoped>
#pie {
    height: 45vh;
}
</style>